import 'package:flutter/material.dart';
import 'package:macnov/common/empty_data.dart';
import 'package:macnov/common/head_title.dart';
import 'package:macnov/common/progress_bar.dart';
import 'package:macnov/models/budget.dart';
import 'package:macnov/models/transaction.dart';
import 'package:macnov/stores/transaction.dart';
import 'package:macnov/utils/colorUtil.dart';
import 'package:flutter_mobx/flutter_mobx.dart';

class Overview extends StatefulWidget {
  final BudgetModel budgetModel;

  const Overview({Key key, this.budgetModel}) : super(key: key);

  @override
  _OverviewState createState() => _OverviewState(budgetModel);
}

class _OverviewState extends State<Overview> {
  final BudgetModel budgetModel;

  _OverviewState(this.budgetModel);

  @override
  void initState() {
    txnStore.filterByBudget(budgetModel.name);
    super.initState();
  }

  Widget _renderAmount(txn) {
    return Text(
      r'$' + txn.amount,
      style: TextStyle(
          fontWeight: FontWeight.w600,
          fontSize: 18,
          color: ColorsUtil.hexColor(0x282828)),
    );
  }

  Widget _renderData(String title, String amount, Color color) {
    return Container(
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(10),
            color: color,
          ),
          Padding(
            child: Text(title),
            padding: EdgeInsets.only(left: 10, right: 10),
          ),
          Expanded(
            child: Text(
              '$amount',
              textAlign: TextAlign.end,
            ),
          )
        ],
      ),
      padding: EdgeInsets.fromLTRB(0, 5, 5, 5),
    );
  }

  _goTxnDetail(BuildContext context, TransactionModel txn) {
    Navigator.pushNamed(context, '/txndetail', arguments: txn);
  }

  Widget _renderList() {
    return Observer(
      builder: (_) => txnStore.budgetTxns.length == 0
          ? Container(padding: EdgeInsets.only(top: 50), child: EmptyData())
          : Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                // physics: NeverScrollableScrollPhysics(),
                itemCount: txnStore.filterTxns.length,
                itemBuilder: (_, index) {
                  TransactionModel txn = txnStore.filterTxns[index];
                  return Card(
                    child: ListTile(
                      onTap: () => _goTxnDetail(context, txn),
                      title: Text(
                        txn.merchant,
                        style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                            color: ColorsUtil.hexColor(0x282828)),
                      ),
                      subtitle: Row(
                        children: <Widget>[
                          Image.asset(
                            'assets/txn/category.png',
                            width: 20,
                            height: 20,
                          ),
                          Text(txn.category),
                        ],
                      ),
                      trailing: this._renderAmount(txn),
                    ),
                  );
                },
              ),
            ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(10, 10, 20, 0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Card(
            child: Container(
              padding: EdgeInsets.fromLTRB(10, 20, 10, 10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Padding(
                    child: Text('BUDGET GOAL'),
                    padding: EdgeInsets.only(bottom: 10),
                  ),
                  Padding(
                    child: Text(r'$' + budgetModel.goal),
                    padding: EdgeInsets.only(bottom: 10),
                  ),
                  Padding(
                    child: ProgressWidget(budgetModel.spent,
                        budgetModel.assigned, budgetModel.unassigned),
                    padding: EdgeInsets.only(bottom: 10),
                  ),
                  _renderData('SPENT', r'$' + budgetModel.spent,
                      ColorsUtil.hexColor(0x376BD1)),
                  _renderData('ASSIGNED', r'$' + budgetModel.assigned,
                      ColorsUtil.hexColor(0x0AADEC)),
                  _renderData('UNASSIGNED', r'$' + budgetModel.unassigned,
                      ColorsUtil.hexColor(0x00E8F4)),
                ],
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 10, bottom: 10),
            child: HeaderTitle(
              title: 'TRANSACTIONS',
            ),
          ),
          _renderList()
        ],
      ),
    );
  }
}
